<template>
	<div class="main" @click="$router.push('/special-flash-sale')">
		<div class="head ">
			<div class="logo  logo-one">
				<svg-icon class="icon" iconName="flashsale"></svg-icon>
				<div class="time">
					<span
						class="time-span"
						:class="[Number(i) || Number(i) === 0 ? 'time-bg' : 'division']"
						v-for="(i, index) in countDown(endTime)"
						:key="index"
						>{{ i }}</span
					>
				</div>
			</div>
		</div>

		<div v-for="(goodsblock, i) in 3" :key="i" v-show="active === i">
			<div class="goods " v-if="!loading">
				<div class="goods-item" v-for="(item, index) in goodsList" :key="index">
					<img :src="item.pic" alt="" />
					<div class="goods-item-title">
						{{ item.title }}
					</div>
					<div>
						<span class="price-tips">到手价</span>
						<span class="price"
							>¥{{
								(item.endPrice - Number(item.mdMoney ? item.mdMoney : 0) - Number(item.tljMoney ? item.tljMoney : 0)) | Fixed(2)
							}}</span
						>
					</div>
				</div>
				<empty v-if="error" emptyText="暂无商品" offsetTop="0"></empty>
				<div class="  skeleton-wrap" v-if="loading">
					<van-skeleton v-for="number in 3" :key="'number' + number" avatar :row="2" :row-width="['100%', '90%']"></van-skeleton>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import moment from 'moment';
import { Skeleton } from 'vant';
import { Empty } from '@/components';
export default {
	data() {
		return {
			time: '00:00:00',
			list: [],
			resList: [],
			goodsList: [],
			endTime: moment(new Date().getTime() + 3600),
			now: moment(),
			active: 0,
			params: {
				page: 1,
				size: 20,
				app: 'yzf',
				type: 1,
				order: 'ysqLevel',
				sort: 'desc'
			},
			loading: false,
			error: false
		};
	},
	computed: {
		//计算属性，返回剩余时间
		countDown() {
			let self = this;
			return function(end) {
				let m1 = this.now;
				let m2 = end;
				var du = moment.duration(m2.diff(m1), 'ms'),
					hours = du.get('hours'),
					mins = du.get('minutes'),
					ss = du.get('seconds');
				if (hours <= 0 && mins <= 0 && ss <= 0) {
					self.endTime = moment(new Date().getTime() + 15000);
					setTimeout(() => {
						this.getClassifyList();
					}, 14000);
					return '00:00:00';
				} else {
					// let time = self.PrefixInteger(hours, 2) + ':' + self.PrefixInteger(mins, 2) + ':' + self.PrefixInteger(ss, 2);
					// if (time === '00:00:00') {
					//     this.endTime = moment(new Date().getTime() + 15000);
					// 	setTimeout(() => {
					// 		this.getClassifyList();
					// 	}, 1000);
					// }
					return self.PrefixInteger(hours, 2) + ':' + self.PrefixInteger(mins, 2) + ':' + self.PrefixInteger(ss, 2);
				}
			};
		}
	},
	components: {
		'van-skeleton': Skeleton,
		Empty
	},
	created() {
		this.getClassifyList();
	},
	mounted() {
		setInterval(() => {
			this.now = moment();
		}, 1000);
	},
	methods: {
		change(item, index) {
			this.active = index;
			this.goodsList = [];
			this.fatchData();
		},

		getClassifyList() {
			// 获取一级分类
			this.$service.shopping.goods.flashTime().then(res => {
				let list = [];
				res.forEach((item, index) => {
					if (item.status == 0 || item.status == 1) {
						if (item.status == 1) {
							let _end = res[index + 1] ? res[index + 1].time : '24:00';
							// 获取结束时间
							this.endTime = moment(moment().format('YYYY-MM-DD' + ' ' + _end));
						}
						list.push({
							...item,
							loading: false,
							finished: false,
							error: false,
							goodsList: [],
							page: 1
						});
					}
				});
				this.list = this.list.concat(list.slice(0, 3));
				this.resList = res;
				this.fatchData();
			});
		},
		PrefixInteger(num, n) {
			return (Array(n).join(0) + num).slice(-n);
		},
		fatchData() {
			this.loading = true;
			this.error = false;
			let start = this.list[this.active].time;
			let end = '';
			let endIndex = '';
			this.resList.forEach((item, index) => {
				if (item.time === start) {
					endIndex = index;
				}
			});
			if (!this.resList[endIndex + 1]) {
				end = '24:00';
			} else {
				end = this.resList[endIndex + 1].time;
			}
			this.params.startTime = moment().format('YYYY-MM-DD' + ' ' + start);
			this.params.endTime = moment().format('YYYY-MM-DD' + ' ' + end);
			// let a = moment(this.params.startTime);
			// let b = moment(this.params.endTime);
			// console.log(b.diff(a));
			// console.log(this.countDown(a, b)());

			this.$service.shopping.goods.flashGoodsList(this.params).then(res => {
				this.loading = false;
				this.goodsList = res.list ? res.list.slice(0, 3) : [];

				// 暂无数据
				if (this.goodsList.length === 0) {
					this.params.page = 1;
					this.error = true;
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.main {
	width: 710px;
	min-height: 390px;
	background: rgba(255, 255, 255, 1);
	border-radius: 16px;
	font-size: 24px;
	margin: 0 auto;
	padding: 18px;

	.head {
		text-align: center;
		@include flexBox(space-between, center);
		.logo {
			.icon {
				width: 185px;
				height: 34px;
			}
			.time {
				@include flexBox(center, center);
				margin-top: 8px;
				.time-span {
					display: block;
					width: 25px;
					height: 26px;
					line-height: 26px;
					color: #221d2c;
					background: #ffffff;
					border-radius: 4px;
					font-size: 20px;
					margin: 0 2px;
					padding: 0;
				}
				.time-bg {
					color: #ffffff;
					background: rgba(34, 29, 44, 1);
				}
				.division {
					width: 10px;
					height: 24px;
					line-height: 24px;
					display: inline-block;
					font-size: 28px;
				}
			}
		}
		.logo-one {
			@include flexBox(space-between, center);
			width: 100%;
		}
		.time-line {
			@include flexBox(center, center);
			width: 400px;

			.time-line-item {
				flex: 1;
				.time-title {
					line-height: 1;
					padding-bottom: 10px;
					.time-title-time {
						color: #221d2c;
						font-size: 28px;
						margin-top: 18px;
						margin-bottom: 6px;
						font-weight: 500;
					}
					.time-title-time-active {
						color: rgba(247, 1, 20, 1);
						font-weight: 500;
					}
					.time-title-b {
						color: #818181;
						font-size: 20px;
						height: 26px;
						line-height: 26px;
						.time-title-b-active {
							height: 26px;
							line-height: 26px;
							color: #ffffff;
							background: rgba(247, 1, 20, 1);
							border-radius: 18px;
							padding: 0 15px;
						}
					}
				}
			}
		}
	}
}

.goods {
	@include flexBox(space-between, center);
	width: 652px;
	margin: 0 auto;
	margin-top: 34px;
	.goods-item {
		width: 200px;
		img {
			width: 200px;
			height: 200px;
			border-radius: 10px;
		}
		.goods-item-title {
			@include ellipsis();
			font-size: 24px;
			color: rgba(23, 23, 23, 1);
			font-weight: 400;
		}
		.price-tips {
			width: 66px;
			height: 22px;
			line-height: 22px;
			background: linear-gradient(85deg, rgba(247, 1, 20, 1) 0%, rgba(255, 126, 126, 1) 100%);
			border-radius: 14px 2px 14px 14px;
			color: #ffffff;
			font-weight: 500;
			font-size: 16px;
			padding: 0 10px;
		}
		.price {
			font-size: 28px;
			font-weight: 500;
			line-height: 40px;
			color: rgba(247, 1, 20, 1);
			margin-left: 8px;
		}
	}
}
.skeleton-wrap {
	// width: 200px;
	width: 720px;
	min-height: 250px;
	margin: 0px auto 0;
	border-radius: 32px;
	background: $color-white;
	// padding: 24px;
	// box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	@include flexBox(space-between, center);
	.van-skeleton {
		width: 180px;
		border-bottom: 2px dotted #f2f3f5;
		padding: 0 0 0px 0;
		@include flexBox(center, center, wrap);
		flex-wrap: wrap;
		.van-skeleton__avatar {
			width: 180px !important;
			height: 180px !important;
			border-radius: 8px;
			// padding-bottom: 36%;
			margin-right: 0;
		}
		.van-skeleton__content {
			padding: 0;
			@include flexBox(space-between, null, column);
			margin-top: 10px;
		}
	}
}

::v-deep .empty-box {
	position: relative;
	top: -30px;
}
</style>
